import React, { Component } from 'react';

import { Link } from 'react-router-dom';
import { Grid, Button, Modal } from 'antd-mobile';
import { getToken, removeToken } from '../../utils/auth';
import { BASE_URL, API, isAuth } from '../../utils';

import styles from './index.module.scss';

// 菜单数据
const menus = [
  { id: 1, name: '我的收藏', iconfont: 'icon-coll', to: '/favor' },
  { id: 2, name: '我的出租', iconfont: 'icon-ind', to: '/rent' },
  { id: 3, name: '看房记录', iconfont: 'icon-record' },
  {
    id: 4,
    name: '成为房主',
    iconfont: 'icon-identity'
  },
  { id: 5, name: '个人资料', iconfont: 'icon-myinfo' },
  { id: 6, name: '联系我们', iconfont: 'icon-cust' }
];

// 默认头像
const DEFAULT_AVATAR = BASE_URL + '/img/profile/avatar.png';

const alert = Modal.alert;

export default class Profile extends Component {
  state = {
    // 是否登录  如果为true则登录了，如果为false，则没有登录
    isLogin: isAuth(),
    // 用户个人资料
    userInfo: {
      // 用户头像
      avatar: '/img/profile/avatar.png',
      // 昵称
      nickname: '游客'
    }
  };
  componentDidMount() {
    this.getUserInfo();
  }
  // 获取个人资料
  async getUserInfo() {
    const { isLogin } = this.state;
    if (!isLogin) return;
    // 没有登录的时候不发送请求

    // 登录了
    // 发送请求获取个人资料
    const res = await API.get('/user', {
      // headers: {
      //   authorization: getToken()
      // }
    });
    // console.log(res)
    const { status, body } = res.data;
    if (status === 200) {
      this.setState({
        userInfo: body
      });
    } else if (status === 400) {
      // 登录失败，token异常或过期
      // 移除token
      // removeToken();
      // 改变state中isLogin的状态为false  token失效其实就是没有登录
      this.setState({
        isLogin: false
      });
    }
  }

  // 退出功能
  logout = () => {
    // 弹出modal组件
    alert('提示', '是否确定退出？', [
      { text: '取消' },
      {
        text: '退出',
        onPress: () => {
          // 服务器退出
          API.post('/user/logout', null, {
            // headers: {
            //   authorization: getToken()
            // }
          });
          // 本地退出
          removeToken()

          // 更新登录状态
          this.setState({
            isLogin: false,
            userInfo: {}
          })
        }
      }
    ]);
  };

  render() {
    const { history } = this.props;
    const {
      isLogin,
      userInfo: { avatar, nickname }
    } = this.state;
    return (
      <div className={styles.root}>
        {/* 个人信息 */}
        <div className={styles.title}>
          <img
            className={styles.bg}
            src={BASE_URL + '/img/profile/bg.png'}
            alt="背景图"
          />
          <div className={styles.info}>
            <div className={styles.myIcon}>
              <img
                className={styles.avatar}
                src={isLogin ? `${BASE_URL}${avatar}` : DEFAULT_AVATAR}
                alt="icon"
              />
            </div>
            <div className={styles.user}>
              <div className={styles.name}>{isLogin ? nickname : '游客'}</div>
              {isLogin ? (
                /* 登录后展示： */
                <>
                  <div className={styles.auth}>
                    <span onClick={this.logout}>退出</span>
                  </div>
                  <div className={styles.edit}>
                    编辑个人资料
                    <span className={styles.arrow}>
                      <i className="iconfont icon-arrow" />
                    </span>
                  </div>
                </>
              ) : (
                /* 未登录展示： */
                <div className={styles.edit}>
                  <Button
                    type="primary"
                    size="small"
                    inline
                    onClick={() => history.push('/login')}
                  >
                    去登录
                  </Button>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* 九宫格菜单 */}
        <Grid
          data={menus}
          columnNum={3}
          hasLine={false}
          renderItem={item =>
            item.to ? (
              <Link to={item.to}>
                <div className={styles.menuItem}>
                  <i className={`iconfont ${item.iconfont}`} />
                  <span>{item.name}</span>
                </div>
              </Link>
            ) : (
              <div className={styles.menuItem}>
                <i className={`iconfont ${item.iconfont}`} />
                <span>{item.name}</span>
              </div>
            )
          }
        />

        {/* 加入我们 */}
        <div className={styles.ad}>
          <img src={BASE_URL + '/img/profile/join.png'} alt="" />
        </div>
      </div>
    );
  }
}
